<template>
  <div class="dashboard-container">
    <!-- 顶部区域 -->
    <header-section />
    
    <!-- 中部区域 -->
    <middle-section />
    
    <!-- 底部区域 -->
    <bottom-section />
  </div>
</template>

<script setup>
import {  onMounted, onBeforeUnmount } from 'vue'
import HeaderSection from './components/HeaderSection.vue'
import MiddleSection from './components/MiddleSection.vue'
import BottomSection from './components/BottomSection.vue'
import { getRealTimeData } from '@/api/dashboard'
import { useSystemStore } from '@/pinia/modules/system'
// import { BarChart } from '@toast-ui/vue-chart';
// import { createApp } from 'vue'

// 系统状态管理
const systemStore = useSystemStore()

// 定时获取数据
let timer = null

onMounted(async () => {
  // 首次获取数据
  const data = await getRealTimeData()
  systemStore.updateRealTimeData(data)
  
  // 定时刷新
  timer = setInterval(async () => {
    const data = await getRealTimeData()
    systemStore.updateRealTimeData(data)
  }, 5000) // 每5秒刷新一次
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// const app = createApp({})
// // 注册全局组件UI库
// app.component('BarChart', BarChart);

</script>

<style lang="scss" scoped>
body {
  font-family: "方正朝歌圆", sans-serif;
}

.dashboard-container {
  width: 100%;
  height: 100vh;
  // background: var(--dark-bg);
  background-color: var(--mainColor);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  // 暗色主题变量
  --dark-bg: #1a1a1a;  
  // 浅色主题变量
  // --dark-bg: #22cef1;  
  --text-color: #fff;
  --primary-color: #00a8ff;
  --scroll-color: #00ff62;
  --warning-color: #ffd700;
  --danger-color: #ff4757;
  --success-color: #2ed573;
  
  // 工业风格边框
  --border-style: 1px solid rgba(255, 255, 255, 0.1);
  --box-shadow: 0 0 20px rgba(0, 168, 255, 0.1);

  .header-section {
    height: 60px;
    flex-shrink: 0;
  }

  .middle-section {
    flex: 1;
    min-height: 0; 
    flex-shrink: 0;
  }

  .bottom-section {
    height: 25vh;
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 1px;
  }
}
</style>